<template>
     <div>
         <div class="reg_login-die">
             <ul>
                 <li>
                     <img src="http://q04fjj6fi.bkt.clouddn.com/%E7%9F%A9%E5%BD%A2%209%20%E6%8B%B7%E8%B4%9D.png" alt="">
                 </li>
                 <li>
                    <span>登录</span>
                    <span>验证码登录</span>
                    <span>注册</span>
                 </li>
             </ul>
             <ul>
                 <li>
                    <ul>
                       <li class="reg_login-login">
                           <ul>
                                <li>
                                   <img src="http://q04fjj6fi.bkt.clouddn.com/sjhtb.png" alt="">
                                   <input type="text" placeholder="手机号码">
                                   <span>手机号码错误</span>
                                </li>
                                <li>
                                   <img src="http://q04fjj6fi.bkt.clouddn.com/%E9%94%AE%E7%9B%98%20%E6%8B%B7%E8%B4%9D%204.png" alt="" >
                                   <input type="text" placeholder="密码">
                                   <span>密码错误</span>
                                </li>
                                <li class="login_icom">
                                    <img src="http://q04fjj6fi.bkt.clouddn.com/%E7%99%BB%E5%BD%95%281%29.png" alt="">
                                </li>
                                <li class="login_pass">
                                   <span>验证码登录</span><span>|</span><span>忘记密码</span>
                                </li>
                                <li>
                                   <span></span>
                                   <div>
                                      <p><img src="http://q04fjj6fi.bkt.clouddn.com/wx-login.png" alt=""></p>
                                      <p>第三方登录</p>
                                   </div>
                                   <span>

                                   </span>
                                </li>
                           </ul>
                       </li>
                       <li  class="reg_login-passLogin">
                          <ul>
                              <li>
                                   <img src="http://q04fjj6fi.bkt.clouddn.com/sjhtb.png" alt="">
                                   <input type="text" placeholder="手机号码">
                                   <p>手机号码错误</p>
                                </li>
                                <li>
                                   <img src="http://q04fjj6fi.bkt.clouddn.com/%E9%94%AE%E7%9B%98%20%E6%8B%B7%E8%B4%9D%204.png" alt="" >
                                   <input type="text" placeholder="请输入验证码">
                                   <span>
                                      获取验证码
                                   </span>
                                   <p>验证码错误</p>
                                </li>
                                <li>
                                  <img src="http://q04fjj6fi.bkt.clouddn.com/%E7%99%BB%E5%BD%95%281%29.png" alt="">
                                </li>
                                <li>
                                   密码登录
                                </li>
                          </ul>
                       </li>
                       <li class="reg_login-register">
                            <ul>
                               <li>
                                   <img src="http://q04fjj6fi.bkt.clouddn.com/%E6%A4%AD%E5%9C%86%204.png" alt="">
                                   <input type="text" placeholder="我是(*角色选定后不可更改)">
                                   <img src="http://q04fjj6fi.bkt.clouddn.com/xz%282%29.png" alt="">
                               </li>
                               <li>
                                 <img src="http://q04fjj6fi.bkt.clouddn.com/sjhtb.png" alt="">
                                 <input type="text" placeholder="请输入手机号码">
                                 <p>
                                   手机号码错误
                                 </p>
                               </li>
                               <li>
                                 <img src="http://q04fjj6fi.bkt.clouddn.com/%E7%94%A8%E6%88%B7.png" alt="">
                                 <input type="text" name="" id="" placeholder="命名您的招生网站">
                               </li>
                               <li>
                                 <img src="http://q04fjj6fi.bkt.clouddn.com/%E9%94%AE%E7%9B%98%20%E6%8B%B7%E8%B4%9D%204.png" alt="">
                                 <input type="text" placeholder="请输入密码">
                                 <p>
                                   密码错误
                                 </p>
                               </li>
                               <li>
                                 <img src="http://q04fjj6fi.bkt.clouddn.com/%E9%AA%8C%E8%AF%81%E7%A0%81.png" alt="">
                                 <input type="text" name="" id="" placeholder="请输入图片验证码">
                                 <img src="http://q04fjj6fi.bkt.clouddn.com/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%202%282%29.png" alt="">
                                <p>
                                   验证码错误
                                 </p>
                               </li>
                               <li>
                                  <img src="http://q04fjj6fi.bkt.clouddn.com/%E6%B3%A8%E5%86%8C.png" alt="">
                               </li>
                               <li>
                                  <span>
                                     点击注册即表示同意
                                  </span>
                                  <span>
                                    《招生库用户协议》
                                  </span>
                               </li>
                            </ul>
                       </li>
                    </ul>
                 </li>
             </ul>
         </div>
     </div>
</template>

<script>
export default {
    data(){
      return {
      }
    },
    methods:{

    },
    mounted(){
    }

}
</script>

<style scoped>
/* 注册模块开始 */
   .reg_login-register>ul{
     padding:0 34rpx;
     background: #fff;
   }
   .reg_login-register>ul>li{
     height: 80rpx;
     line-height: 80rpx;
     display: flex;
     align-items: center;
     border-bottom: 2rpx solid #ddddddff;
     position: relative;
     padding-top: 20rpx;
   }
   .reg_login-register>ul>li>img:nth-child(1){
     width: 44rpx;
     height: 44rpx;
     margin-right: 22rpx;
   }
   .reg_login-register>ul>li>input{
      font-size:12px;
      font-weight:400;
      color:rgba(153,153,153,1);
      flex: 1;
   }
   .reg_login-register>ul>li:nth-child(1)>img:nth-child(3){
     width: 16rpx;
     height: 28rpx;
     margin-left: -20rpx;
   }
   .reg_login-register>ul>li:nth-child(5){
     padding-top: 50rpx;
   }
   .reg_login-register>ul>li:nth-child(5)>img:nth-child(3){
     width: 163rpx;
     height: 53rpx;
   }
   .reg_login-register>ul>li>p{
     font-size:12px;
    font-weight:400;
    color:rgba(255,0,0,1);
    position: absolute;
    right:10rpx;
    bottom:-60rpx;
   }
   .reg_login-register>ul>li:nth-child(6){
      width: 692rpx;
     height: 98rpx;
     margin: 0;
     border-bottom: none;
     margin-top: 72rpx;
   }
   .reg_login-register>ul>li:nth-child(6)>img{
     width: 692rpx;
     height: 98rpx;
   }
   .reg_login-register>ul>li:nth-child(7){
     margin-top: 33rpx;
     width: 450rpx;
     font-size:12px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(153,153,153,1);
    border-bottom: none;
    margin: 0 auto;
   }
   .reg_login-register>ul>li:nth-child(7)>span:last-child{
     color:#2297D4FF;
   }
/* 注册模块结束 */
/* 密码验证登录模块开始 */
   .reg_login-passLogin>ul{
     padding:0 30rpx;
     background: #fff;
   }
   .reg_login-passLogin>ul>li{
     height: 90rpx;
     border-bottom: 2rpx solid #ddddddff;
     display: flex;
     align-items: center;
     padding-top: 60rpx;
     position: relative;
   }
   .reg_login-passLogin>ul>li>img{
     width: 42rpx;
     height: 42rpx;
     margin-right: 22rpx;
     margin-top: 15rpx;
   }
   .reg_login-passLogin>ul>li>input{
     font-size:14px;
    font-weight:400;
    color:rgba(153,153,153,1);
    flex: 1;
     margin-top: 15rpx;

   }
   .reg_login-passLogin>ul>li>span:nth-child(3){
     border-radius: 10rpx;
     display: inline-block;
     font-size:12px;
    font-weight:400;
    color:rgba(34,151,212,1);
    border:1px solid #2297D4FF;
    width: 199rpx;
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
   }
   .reg_login-passLogin>ul>li:nth-child(2)>img{
     width: 44rpx;
     height: 44rpx;
   }
   .reg_login-passLogin>ul>li>p:last-child{
     font-size:12px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(255,0,0,1);
    position: absolute;
    border:none;
    right: 10rpx;
    bottom: -45rpx;
   }
   .reg_login-passLogin>ul>li:nth-child(3){
     width: 692rpx;
     height: 98rpx;
     margin: 0 auto;
     margin-top: 194rpx;
     border-bottom: 0;
   }
   .reg_login-passLogin>ul>li:nth-child(3)>img{
     width: 100%;
     height: 100%;
   }
   .reg_login-passLogin>ul>li:nth-child(4){
     font-size:12px;
    font-weight:400;
    color:rgba(153,153,153,1);
    margin-top: 20rpx;
    width: 100rpx;
    margin: 0 auto;
    border-bottom: 0;
   }
/* 密码验证登录模块结束 */
/* nav部分开始 */
    .reg_login-die>ul:nth-child(1){
      box-sizing: border-box;
      width: 100%;
      height: 534rpx;
      background: url('http://q04fjj6fi.bkt.clouddn.com/reg_login_bg.png') no-repeat;
      background-size: 100% 100%;
      background-position:  center center;
      padding-top: 36rpx;
      position: relative;
    }
    .reg_login-die>ul:nth-child(1)>li:nth-child(1)>img{
      width: 33rpx;
      height: 36rpx;
      margin-right: 36rpx;
    }
    .reg_login-die>ul:nth-child(1)>li:nth-child(1){
      width: 100%;
      text-align: right;
    }
    .reg_login-die>ul:nth-child(1)>li:nth-child(2){
      display: flex;
      justify-content: space-between;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
    .reg_login-die>ul:nth-child(1)>li:nth-child(2)>span{
      display: inline-block;
      width: 50%;
      font-size:15px;
      text-align: center;
      font-weight:bold;
      color:rgba(255,255,255,1);
      padding:17rpx 0;
      border-bottom: 6rpx solid #005F9EFF;
    }
/* nav部分结束 */
/* 登录部分开始 */
   .reg_login-login>ul:nth-child(1){
     padding:0 30rpx;
     background: #fff;
   }
   .reg_login-login>ul:nth-child(1)>li:nth-child(1),.reg_login-login>ul:nth-child(1)>li:nth-child(2){
     height: 80rpx;
     line-height: 80rpx;
     border-bottom: 1rpx solid #ddddddff;
     display: flex;
     align-items: center;
     position: relative;
     padding-top: 20rpx;
   }
   .reg_login-login>ul:nth-child(1)>li:nth-child(1)>img,.reg_login-login>ul:nth-child(1)>li:nth-child(2)>img{
     width: 42rpx;
     height: 42rpx;
     margin-right: 22rpx;
   }
   .reg_login-login>ul:nth-child(1)>li:nth-child(1)>input,.reg_login-login>ul:nth-child(1)>li:nth-child(2)>input{
     font-size:14px;
    font-weight:400;
    color:rgba(153,153,153,1);
   }
   .reg_login-login>ul:nth-child(1)>li:nth-child(1)>span,.reg_login-login>ul:nth-child(1)>li:nth-child(2)>span{
     font-size:12px;
    font-weight:400;
    color:rgba(255,0,0,1);
    line-height:52px;
    position: absolute;
    right: 10rpx;
    bottom: -75rpx;
   }
   .login_icom{
     width: 100%;
     text-align: center;
     margin-top: 72rpx;
   }
   .login_icom>img{
      width:692rpx;
      height: 98rpx;
   }
   .login_pass{
     font-size:12px;
    font-weight:400;
    color:rgba(153,153,153,1);
    text-align: center;
         margin-top: 32rpx;
   }
   .login_pass>span{
     margin-right: 30rpx;

   }
   .login_pass>span:last-child{
     margin-right: 0;
   }
   .reg_login-login>ul:nth-child(1)>li:last-child{
     display: flex;
     justify-content: space-between;
     margin-top: 68rpx;
   }
   .reg_login-login>ul>li:last-child>span{
      width: 235rpx;
      height: 2rpx;
      display: inline-block;
      background: #ddddddff;
      margin-top: 20rpx;
   }
   .reg_login-login>ul:nth-child(1)>li:last-child>div>p{
     text-align: center;
   }
   .reg_login-login>ul:nth-child(1)>li:last-child>div>p>img{
     width: 65rpx;
     height: 58rpx;
   }
   .reg_login-login>ul:nth-child(1)>li:last-child>div>p:nth-child(2){
    font-size:22rpx;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:36rpx;
 }
/* 登录部分开始 */
</style>
